<template>
	<view class="page" v-if="info">
		<view class="group_3 pore">
			<view class="block_8 flex-jus">
				<view class="group_5">
					<view class="image-text_10 flex-row justify-between">
						<image class="label_4" referrerpolicy="no-referrer"
							:src="api_host + info.avatar" />
						<text class="text-group_5">{{info.nickname}}</text>
					</view>
				</view>
				<view class="flex wx">
					<image class="label_5" v-if="!info.isOrganize && userInfo.id !== info.userId"
						referrerpolicy="no-referrer" src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/msg.png"
						@click="openUrl(`/subpage/meethuangshi/chat?id=${info.userId}&nickName=${info.nickname}&type=activity`)" />
					<button open-type="share"> 
						<image class="label_6" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/share.png" />
					</button>
				</view>
			</view>
			<view class="group_6">
				<view class="box_5">
					<!-- <u-swiper :list="info.imgs" height="600rpx" @change="banChange" radius="0" circular></u-swiper> -->
					<bannerCom :list="info.imgs"></bannerCom>
					<view class="text-wrapper_3">
						<text class="text_11">{{banIndex}}/{{info.imgs.length}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="group_8">
				<view class="group_15 flex">
					<view class="box_3">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/line.png" mode="widthFix"></image>
					</view>
					<text class="text_3 ml20 textoverflow2">{{info.name}}</text>
				</view>
				<view class="group_16 flex-row">
					<view class="image-text_11 flex-row">
						<image class="thumbnail_16" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/time.png" />
						<text class="text-group_6 ml10">
							{{info.startDate}}～{{info.endDate}}
						</text>
					</view>
				</view>
				<view class="group_17 flex-row ml20">
					<view class="image-text_12 flex-row">
						<image class="thumbnail_17" referrerpolicy="no-referrer"
							src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/map.png" />
						<text class="text-group_7 ml10">{{info.distance}}&nbsp;&nbsp;{{info.address}}</text>
					</view>
				</view>
			</view>
			<view class="group_7">
				<view class="text-wrapper_4">
					<text class="c343 f28">
						{{info.content}}
						<!-- <u-parse :content="info.content"></u-parse> -->
					</text>
					<!-- <text class="paragraph_10">
						&nbsp;风险告知
						<br />
						本活动为自愿参与，组织者不承担意外责任
					</text> -->
				</view>
			</view>
		</view>
		
		<view class="flex-au mt40" v-if="userInfo.id !== info.userId">
			<u-button v-if="hasApply" type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
				disabled :customStyle="{'width':'80%','height':'80rpx'}" @click="open('show_info')">已报名</u-button>
			<view class="flex1 flex-au" v-else>
				<u-button v-if="info.applicationDeadlineTimesStatus" type="success" shape="circle"
					color="linear-gradient(170deg, #FFA5F5, #319EFF)" disabled
					:customStyle="{'width':'80%','height':'80rpx'}" @click="open('show_info')">报名已截止</u-button>
				<u-button v-else type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
					:disabled="statusList[info.actStatus].disabled" :customStyle="{'width':'80%','height':'80rpx'}"
					@click="open('show_info')">{{statusList[info.actStatus].name}}</u-button>
			</view>
		</view>
		<!-- <view class="flex-au mt40">
			<u-button v-if="hasApply" type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
				disabled :customStyle="{'width':'80%','height':'80rpx'}"
				@click="open('show_info')">已报名</u-button>
			<u-button v-else type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
				:disabled="statusList[info.actStatus].disabled" :customStyle="{'width':'80%','height':'80rpx'}"
				@click="open('show_info')">{{statusList[info.actStatus].name}}</u-button>
		</view> -->
		<u-popup :show="show_info" @close="close" @open="open('show_info')" mode="center" closeable round="20"
			:customStyle="{'width':'90%'}">
			<view class="p30">
				<view class="textC f28 c343 bold">请确认您的活动信息</view>
				<u-gap height="20"></u-gap>
				<view>
					<view class="f28 c343 mb10">活动主题：</view>
					<view class="c343 bold mb10">{{info.name}}</view>
					<view class="flex mb10">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/time.png" mode=""
							style="width: 30rpx;height: 30rpx;"></image>
						<text class="ml10 f24 c999">{{info.startDate}}～{{info.endDate}} </text>
					</view>
					<view class="flex mb10">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/map.png" mode=""
							style="width: 30rpx;height: 30rpx;"></image>
						<text class="ml10 f24 c999">{{info.distance}}&nbsp;&nbsp;{{info.address}}</text>
					</view>
					<u-line color="#999" margin="30rpx 0"></u-line>
					<view class="flex">
						<u-icon size="16" name="info-circle-fill" color="#1A76FD"></u-icon>
						<text class="c343 ml10 f26">免责声明</text>
					</view>
					<u-gap height="10"></u-gap>
					<view>
						<view class="c666 f26">
							·活动均为用户自行发布并组织的活动，请您注意，遇见黄石仅为活动提供平台技术支持，活动后续事项由活动发起者负责组织。如您因活动发起、组织、撤销、下线等引起的纠纷须由主理人自行解决并承担后果。
						</view>
						<u-gap height="10"></u-gap>
						<view class="c666 f26">
							·报名并参与活动，请您谨慎甄别用户发起活动的身份及信息，注意用户提示的内容，参加活动前妥善评估活动安全性及自身身体状况适合参加活动安排，确保参与线下活动时的人身安全与财产安全，若因隐瞒身体疾病或伤情故意参加活动导致的意外伤害需自行承担责任。
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<view class="flex-au">
						<u-button type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
							:customStyle="{'width':'50%'}" @click="applyActBtn">我已阅读并同意</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_success" @close="close" @open="open('show_success')" mode="center" round="20"
			:customStyle="{'width':'80%'}" bgColor="transparent">
			<view class="pore">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/success.png" mode="widthFix"
					class="width100"></image>
				<view class="success-box flex-au">
					<view class="width100 textC p30">
						<view class="c343 bold f32 mb20">您已提交报名，请等待审核</view>
						<view class="c343 mb20">请在【个人中心-活动】<br> 中查看详情</view>
						<u-gap height="10"></u-gap>
						<view class="flex-au">
							<u-button type="success" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
								:customStyle="{'width':'50%'}" @click="close">好的</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<authPop :show="show_auth" @authClose="close"></authPop>
	</view>
</template>
<script>
	import bannerCom from '@/components/banSwiper/index.vue'
	import authPop from '@/components/userAuthTip/index.vue';
	import {
		getPersonInfo,
		getActInfo,
		applyAct,
		getUserActStatus
	} from '@/common/api_meethuangshi.js'
	export default {
		components:{
			authPop,
			bannerCom
		},
		data() {
			return {
				userProfile:null,
				latitude: null,
				longitude: null,
				hasApply: null,
				id: '',
				info: null,
				show_info: false,
				show_success: false,
				show_auth: false,
				banIndex: 1,
				statusList: {
					0: {
						type: 'end',
						name: '活动未开始',
						disabled: true
					},
					1: {
						type: 'ing',
						name: '立即报名',
						disabled: false
					},
					2: {
						type: 'end',
						name: '活动已结束',
						disabled: false
					}
				},
				shStatusList: {
					0: {
						type: 'info',
						name: '待审核'
					},
					1: {
						type: 'success',
						name: '审核通过'
					},
					2: {
						type: 'error',
						name: '审核未通过'
					}
				}
			};
		},
		onShareAppMessage(res) {
			return {
				title: this.info.name,
				path: '/subpage/meethuangshi/activityDetail?id=' + this.info.id,
				// desc: this.detail.title,
				content: this.info.name,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		async onLoad(option) {
			this.id = option.id || '1';
			await this.$onLaunched;
			this.getUserActStatus()
			this.getLocation()
		},
		async onShow() {
			await this.$onLaunched;
			this.getPersonInfo()
		},
		methods: {
			async getPersonInfo() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await getPersonInfo({
					userId: userId
				})
				this.userProfile = res.data
			},
			getLocation() {
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						const {
							latitude,
							longitude
						} = res;
						that.latitude = latitude;
						that.longitude = longitude;
						that.getActInfo()
					},
					fail() {
						that.getActInfo()
					}
				});
			},
			async getUserActStatus() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await getUserActStatus({
					userId,
					actId: this.id
				})
				if (res.code == 200) {
					this.hasApply = res.data;
				}
			},
			async getActInfo() {
				const res = await getActInfo({
					id: this.id
				})
				if (res.code == 200) {
					this.info = res.data.activity;
					this.info.nickname = res.data.initiatorName;
					this.info.avatar = res.data.initiatorAvatar;
					this.info.content = this.info.content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
					// this.info.imgs = this.info.pic ? this.info.pic.split(',').map(item => this.api_host + item) : [];
					this.info.imgs = this.info.pic ? this.info.pic.split(',') : [];
					this.info.distance = this.$utils.getDistance(this.latitude, this.longitude, this.info.location
						.split(',')[0], this.info.location.split(',')[1]);
					if (this.info.actStatus == 1) {
						const replaceTime = this.info.applicationDeadline.replace(/-/g, '/');
						const applicationDeadlineTimes = new Date(replaceTime).getTime();
						const nowTimes = new Date().getTime()
						if (nowTimes > applicationDeadlineTimes) {
							this.info.applicationDeadlineTimesStatus = 1;
						}
					}
					console.log('this.info',this.info);
				}
			},
			banChange(e) {
				this.banIndex = e.current + 1;
			},
			open(key) {
				if(key == 'show_info'){
					if(this.userProfile.idCert == 1){
						this.show_auth = true
						return false;
					}
				}
				this[key] = true;
			},
			close() {
				this.show_info = false;
				this.show_success = false;
				this.show_auth = false;
			},
			async applyActBtn() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				uni.showLoading({
					mask: true
				})
				const res = await applyAct({
					userId,
					actId: this.id
				})
				if (res.code == 200) {
					uni.hideLoading()
					this.getUserActStatus()
					this.close();
					this.open('show_success');
				}
			}
		},
	};
</script>
<style lang="scss">
	@import '@/common/reset.css';

	.success-box {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 80rpx;
		left: 0;
	}
	.group-box{
		background-color: #F7F6FF;
		position: relative;
		z-index: 999;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: -100rpx;
		padding-top: 10rpx;
	}
	page {
		background-color: #F7F6FF;
	}

	.page {
		position: relative;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 28px;

		.box_4 {
			padding: 18px 6px 1px 0;

			.group_13 {
				margin: 0 27px 0 43px;

				.text_17 {
					overflow-wrap: break-word;
					color: rgba(0, 0, 0, 1);
					font-size: 17px;
					font-family: SFPro-Semibold;
					font-weight: 600;
					text-align: right;
					white-space: nowrap;
					line-height: 22px;
				}

				.thumbnail_14 {
					width: 19px;
					height: 12px;
					margin: 5px 0 5px 182px;
				}

				.thumbnail_15 {
					width: 17px;
					height: 12px;
					margin: 5px 0 5px 8px;
				}

				.image_9 {
					width: 27px;
					height: 13px;
					margin: 5px 0 4px 7px;
				}
			}

			.group_14 {
				margin-top: 6px;

				.label_8 {
					width: 42px;
					height: 46px;
				}

				.text_18 {
					height: 24px;
					overflow-wrap: break-word;
					color: rgba(0, 0, 0, 1);
					font-size: 17px;
					font-family: SFProDisplay-Medium;
					font-weight: 500;
					text-align: right;
					white-space: nowrap;
					line-height: 20px;
					margin: 11px 0 0 120px;
				}

				.image_10 {
					width: 87px;
					height: 32px;
					margin: 7px 0 7px 67px;
				}
			}
		}

		.group_3 {
			background-color: #fff;
			.block_8 {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				left: 30rpx;
				width: 94%;
				z-index: 999;

				.group_5 {
					background-color: rgba(0, 0, 0, 0.24);
					border-radius: 20px;
					border: 1px solid #fff;

					.image-text_10 {

						.label_4 {
							width: 36px;
							height: 36px;
							border-radius: 50%;
						}

						.text-group_5 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 14px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 20px;
							margin-top: 8px;
							padding: 0 8rpx;
						}
					}
				}

				.label_5 {
					width: 30px;
					height: 30px;
					margin: 5px 0 5px 136px;
				}

				.label_6 {
					width: 30px;
					height: 30px;
					margin: 5px 0 5px 20px;
				}
			}

			.group_6 {
				padding-top: 2px;

				.box_5 {
					.image_11 {
						width: 36px;
						height: 4px;
						margin-top: 16px;
					}

					.text-wrapper_3 {
						background-color: rgba(0, 0, 0, 0.3);
						border-radius: 14px;
						padding: 2px 8px 2px 8px;
						position: absolute;
						bottom: 120rpx;
						right: 30rpx;

						.text_11 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 12px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							text-align: right;
							white-space: nowrap;
							line-height: 16px;
						}
					}
				}

				.block_4 {
					background-color: rgba(247, 246, 255, 1);
					border-radius: 30px 30px 0px 0px;
					width: 390px;
					height: 40px;
					margin-top: 12px;
				}
			}
		}

		.group_7 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			align-self: center;
			padding: 16px 30rpx;
			margin: 0 30rpx 0 30rpx;

			.text-wrapper_4 {
				//overflow-wrap: break-word;
				text-align: left;
				line-height: 22px;

				.text_12 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.text_13 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.text_14 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_2 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_3 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_4 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_5 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_6 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_7 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_8 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_9 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-family: AppleColorEmoji;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}

				.paragraph_10 {
					width: 266px;
					height: 330px;
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 22px;
				}
			}
		}

		.text-wrapper_2 {
			text-align: center;
			padding: 25rpx 0;
			margin: 30rpx;
			border-radius: 50rpx;

			.text_8 {
				overflow-wrap: break-word;
				font-size: 16px;
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				text-align: right;
				white-space: nowrap;
				line-height: 22px;
			}

			&.active {
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/yujian/btnBg.png') 100% no-repeat;
				background-size: 100% 100%;

				.text_8 {
					color: rgba(255, 255, 255, 1);
				}
			}

			&.end {
				background-color: #EBEAF5;

				.text_8 {
					color: #34314F;
				}
			}

			&.apply {
				background-color: #34314F;

				.text_8 {
					color: #EBEAF5;
				}
			}
		}

		.group_8 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			padding: 30rpx 0 30rpx 0;
			margin: 30rpx;
			position: relative;
			z-index: 1000;
			box-shadow: 10px -10px 10px rgba(255, 255, 255, 0.3);
			.group_15 {
				

				.box_3 {
					image {
						width: 8rpx;
					}
				}

				.text_3 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 18px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 25px;
				}
			}

			.group_16 {
				margin: 14px 0 0 16px;

				.image-text_11 {

					.thumbnail_16 {
						width: 16px;
						height: 16px;
					}

					.text-group_6 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}
			}

			.group_17 {
				margin: 10px 64px 0 16px;

				.image-text_12 {

					.thumbnail_17 {
						width: 16px;
						height: 16px;
					}

					.text-group_7 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 12px;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 16px;
					}
				}
			}
		}
	}
</style>